<template>
	<!-- 必到-选择城市 -->
	<view>
		<!-- 导航 -->
		<!-- <u-navbar back-text="选择城市" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar> -->
		<!-- <u-navbar back-icon-color="#000000" title="选择城市" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<!-- 定位的城市 -->
		<view class="typeface1">
			当前城市
		</view>
		<view class="cityLabel">
			<image src="../../../static/img/1-5.png" style="width: 31rpx;height: 40rpx;vertical-align:bottom;"></image>
			<text class="typeface2">{{cityName ||'郑州市'}}</text>
		</view>
		
		<!-- 索引城市 -->
		<view>
			<u-index-list :scrollTop="scrollTop" active-color="#7A7A7A">
				<view v-for="(item, index) in indexList" :key="index">
					<u-index-anchor :index="item.letter"/>
					<view
					class="list-cell"
					v-for="(items,index) in item.item" :key="index" @click="selectCity(items.name+'0',items.open+'0')">
						<text class="cityName">{{items.name}}</text>
						<text class="cityHint" v-if="items.open!=1">（暂未开通，敬请期待）</text>
					</view>
				</view>
			</u-index-list>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				cityName:'',
				scrollTop: 0,
				indexList: [],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReady() {
			this.getSelectCity();
		},
		onLoad(option) {
			this.cityName=option.cityName;
		},
		methods: {
			//获取所有城市
			getSelectCity:function(){
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'index/city',
				};
				let data = {};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据 
					// console.log(res);
					if (res.code == "200") {
						this.indexList=res.data;
						console.log(JSON.stringify(res))
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			//获取选择城市
			selectCity:function(name,option){
				let cityname=name.substring(0,name.length-1);
				let isOption=option.substring(0,option.length-1);
				//判断城市是否开通服务
				if(isOption==1){
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					// prevPage.$vm.siteName = cityname;
					uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
						delta: 1
					});
					uni.setStorage({ key:'siteName',data:cityname});
				}else{
					this.$refs.uToast.show({
						title:"该城市暂未开通",
						type: 'info'
					})
				}
			},
		}
	}
</script>

<style scoped>

.typeface1{
	padding-top:50rpx;
	margin-left:40rpx;
	font-size:32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #7A7A7A;
	opacity: 1;
}
.cityLabel{
	margin-top: 32rpx;
	margin-left: 40rpx;
	background: #FFFFFF;
	border: 1rpx solid #E4E4E4;
	width: 218rpx;
	text-align: center;
	opacity: 1;
	padding: 12rpx 0rpx 12rpx 0rpx;
	margin-bottom: 70rpx;
}
.typeface2{
	margin-left: 18rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #7A7A7A;
}
.list-cell{
	width: 95%;
	border-bottom: 2rpx solid #DFDFDF;
	padding: 46rpx 0rpx 40rpx 24rpx;
}
.cityName{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #979797;
}
.cityHint{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #979797;
	opacity: 1;
}
</style>
